<template>
  <div class="index-wrap">
    <van-nav-bar
      title="名医专栏"
      left-text="返回"
      left-arrow
      fixed
      @click-left="$router.go(-1)"
    />
    <div class="doctors-wrap">
      <div
        class="doctors-item clearfix"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="avatar">
          <img :src="item.avatar" />
        </div>
        <div class="info text-center">
          <h2>{{ item.name }}</h2>
          <span>{{ item.doctors }}</span>
          <ul class="text-white">
            <li class="fs-xxs" v-for="info in item.info" :key="info">
              {{ info }}
            </li>
          </ul>
        </div>
        <div
          class="text-right"
          style="margin-top: -1rem;margin-bottom: .25rem;"
        >
          <van-tag class="details" @click="details(item)" type="primary"
            >查看详情</van-tag
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      list: [
        {
          name: "韦云瀚",
          doctors: "广西非物质文化遗产壮族目诊传承人",
          info: [
            "壮医目诊专家",
            "广西民族医药学会理事",
            "广西壮医医院聘用医师"
          ],
          avatar:
            "http://www.luoyue.org/net/upload/image/20180820/6367036803423460715514228.jpg"
        },
        {
          name: "赵妙元",
          doctors: "靖西壮族医药学校校长",
          info: [
            "民族医药教师",
            "全国壮医普及著名专家",
            "靖西壮医药研究所所长",
            "百色市民族医院主治医师"
          ],
          avatar:
            "http://www.luoyue.org/net/upload/image/20180820/6367036791586083655048779.jpg"
        },
        {
          name: "黄汉儒",
          doctors: "中国民族医药学会副会长",
          info: [
            "民族医药报社社长",
            "全国壮医普及著名专家",
            "广西中医药学会副会长",
            "广西民族医药协会会长"
          ],
          avatar:
            "http://www.luoyue.org/net/upload/image/20180820/6367036824794983093561220.jpg"
        },
        {
          name: "牙廷艺",
          doctors: "壮医针挑微创疗法创始人",
          info: [
            "中国著名壮医专家",
            "壮医针挑微创疗法创始人",
            "广西国际壮医医院主任医师",
            "原广西民族医药研究院临床研究所所长"
          ],
          avatar:
            "http://www.luoyue.org/net/upload/image/20180820/6367036807652902629216717.jpg"
        },
        {
          name: "韦英才",
          doctors: "广西中医药大学壮医药学院副院长",
          info: [
            "中医骨伤副主任医师",
            "广西壮医医院常务副院长",
            "广西反射疗法协会副会长"
          ],
          avatar:
            "http://www.luoyue.org/net/upload/image/20180820/6367036817201248753352328.jpg"
        },
        {
          name: "李凤珍",
          doctors: "广西壮医医院壮医风湿病专科主任",
          info: [
            "广西民族医药协会理事",
            "广西国际壮医医院大内科主任",
            "中国医师协会风湿病学分会委员",
            "壮医风湿病学专业委 员会主任委员"
          ],
          avatar:
            "http://www.luoyue.org/net/upload/image/20180820/6367036813541439431559318.jpg"
        },
        {
          name: "卢世源",
          doctors: "山西稷山县老年病专科医院特聘中医专家",
          info: ["著名白血病治疗专家", "利用壮医壮药治疗白血病"],
          avatar:
            "http://www.luoyue.org/net/upload/image/20180820/6367036794748864551546519.jpg"
        },
        {
          name: "黄艺",
          doctors: "壮医经筋疗法创始人黄敬伟学术继承人",
          info: [
            "广西民族医药协会理事",
            "广西国际壮医医院大内科主任",
            "中国医师协会风湿病学分会委员",
            "壮医风湿病学专业委员会主任委员"
          ],
          avatar:
            "http://www.luoyue.org/net/upload/image/20180820/6367036700692084812663067.jpg"
        },
        {
          name: "覃定学",
          doctors: "南丹县壮医院院长",
          info: [
            "美国针灸学院教授",
            "全国高级康复保健师",
            "全国脊诊整脊杰出专家"
          ],
          avatar:
            "http://www.luoyue.org/net/upload/image/20180820/6367036811218806586800708.jpg"
        },
        {
          name: "黄谨明",
          doctors: "广西中医学院教授",
          info: [
            "中华中医药学会理事",
            "中国民族医药学会理事",
            "全国第二批老中医药专家学术继承工作导师"
          ],
          avatar:
            "http://www.luoyue.org/net/upload/image/20180820/6367036822735065272293346.jpg"
        }
      ]
    };
  },
  methods: {
    details(item) {
      console.log(item);
    }
  }
};
</script>
<style lang="scss" scoped>
.index-wrap {
  padding-top: 46px;
  min-height: 100vh;
  // background-image: url(http://ymshosss.oss-cn-shanghai.aliyuncs.com/Q6QuZphpoYwf1c1571725493191022.png);
  background-attachment: fixed;
  .doctors-wrap {
    margin-top: 50px;
    background: rgba(255, 255, 255, 1);
    .doctors-item {
      padding: 0.25rem 0.5rem;
      margin-top: 100px;
      position: relative;
      .avatar {
        max-height: 120px;
        max-width: 200px;
        overflow: hidden;
        transform: translateY(-40%);
        img {
          height: 100%;
          width: 100%;
        }
      }
      .info {
        display: grid;
        grid-template-rows: 3fr 3fr 2fr;
        h2 {
          color: rgb(204, 169, 105);
        }
        height: 9.2308 * $size;
        transform: translateY(-40%);
      }
      .details {
        position: absolute;
        right: 0.25rem;
        bottom: 0.25rem;
      }
      &:nth-child(even) {
        .avatar {
          float: right;
        }
        background: rgb(204, 169, 105);
      }
      &:nth-child(odd) {
        .avatar {
          float: left;
        }

        background: rgb(204, 169, 105);
      }
    }
  }
}
</style>
